<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

</head>

<body tiles:fragment="content">

<script th:inline="javascript">
//<![CDATA[
  
  var detalle = false;
  var aux = /*[[${actividad.fase.ordenFase}]]*/ ordenFase;
  
$(document).ready(function(){	
	$( "#tabs" ).tabs({
		active: aux,
		disabled: true
		});
	$( "#tabs" ).tabs( "enable", aux );
    $('#botonDetalle').click(function() {
    	if(detalle){
    		$('#mayorDetalle').fadeOut('fast');
    		detalle = false;
    		$('#botonDetalle').html('Ampliar detalle de solicitud');
    	}else{    		
    		$('#mayorDetalle').fadeIn('fast');
    		detalle = true;
    		$('#botonDetalle').html('Menor detalle');
        }
    });
    window.location.hash = '#tabs';
});
//]]>
</script>

	<h5>
		<a href='/consultarAtencion' th:href="@{/consultarAtencion}"
		 th:text="#{ejecutarAtencion.consultarAtencion}">Consulta de fases activas</a>
		>
		<a href='/consultarAtencion' th:href="@{'/verDetalleTrabajo/' + ${faseSeleccionada.id}}"
		 th:text="#{ejecutarAtencion.detalleTrabajo}">Detalle de trabajo</a>
		>
		<span th:if="${modoConsulta}" th:text="#{ejecutarAtencion.consultaActividad}">Consulta de actividad</span>
		<span th:unless="${modoConsulta}" th:text="#{ejecutarAtencion.editarActividad}">Editar actividad</span>
	</h5>
	<fieldset>
		<legend th:text="#{ejecutarAtencion.informacionSolicitud}">Información de Solicitud</legend>
		<div class="span-5">
			<label th:text="#{ejecutarAtencion.numero}">Número de Solicitud </label><br/>				
			<input type="text" th:value="${actividad.fase.solicitud.id}" disabled="disabled"/>
		</div>
		<div class="span-5">
			<label th:text="#{ejecutarAtencion.cliente}">Cliente </label><br/>					
			<input type="text" th:value="${actividad.fase.solicitud.solicitante.cliente.razonSocial}" disabled="disabled"/>
		</div>
		<div class="span-5 last">
			<label th:text="#{ejecutarAtencion.solicitante}">Solicitante </label><br/>					
			<input type="text" th:value="${actividad.fase.solicitud.solicitante.nombre}" disabled="disabled"/>
		</div>		
		<div class="span-18 last" id="mayorDetalle" style="display: none;">
			<div class="span-5">
				<label th:text="#{ejecutarAtencion.AreaSolicitante}">Área solicitante </label><br/>				
				<input type="text" th:value="${actividad.fase.solicitud.areaSolicitante.nombre}" disabled="disabled"/>
			</div>
			<div class="span-5">
				<label th:text="#{ejecutarAtencion.tipoRequerimiento}">Tipo de Requerimiento </label><br/>					
				<input type="text" th:value="${actividad.fase.solicitud.tipoRequerimiento.nombre}" disabled="disabled"/>
			</div>
			<div class="span-5 last">
				<label th:text="#{ejecutarAtencion.fechaEsperada}">Fecha esperada </label><br/>					
				<input type="text" th:value="${#dates.format(actividad.fase.solicitud.fechaEsperada, #messages.msg('date.format'))}" disabled="disabled"/>
			</div>
		
			<div class="span-16 last">
				<p>
					<span th:text="#{registrarSolicitud.desc1}">Desc1 </span><br/>
					<textarea class="span-16" th:text="${actividad.fase.solicitud.desc1}" disabled="disabled"/><br/>
				</p>
					<p>
				<span th:text="#{registrarSolicitud.desc2}">Desc2 </span><br/>
					<textarea class="span-16" th:text="${actividad.fase.solicitud.desc2}" disabled="disabled"/><br/>
				</p>
				<p>
					<span th:text="#{registrarSolicitud.desc3}">Desc3 </span><br/>
					<textarea class="span-16" th:text="${actividad.fase.solicitud.desc3}" disabled="disabled"/><br/>
				</p>
				<p>
					<span th:text="#{registrarSolicitud.desc4}">Desc4 </span><br/>
					<textarea class="span-16" th:text="${actividad.fase.solicitud.desc4}" disabled="disabled"/><br/>
				</p>
				<p>
					<span th:text="#{registrarSolicitud.desc5}">Desc5 </span><br/>
					<textarea class="span-16" th:text="${actividad.fase.solicitud.desc5}" disabled="disabled"/><br/> 
			    </p>
		    </div>
		    <div th:if="${actividad.fase.solicitud.archivo}" class="span-5 last">
		   	    <label th:text="#{ejecutarAtencion.ArchivoAdjunto}">Archivo adjunto </label>					
				<span th:text="${actividad.fase.solicitud.archivo.nombre}"></span>
				<a class="button" href="#" th:href="@{'abrirArchivo/' + ${actividad.fase.solicitud.archivo.id} + '/' + ${actividad.fase.solicitud.archivo.nombre}}">Abrir</a>
			</div>	
		</div>
		<div class="span-5 last">
			<button id="botonDetalle" th:value="#{ejecutarAtencion.botonDetalleSolicitud}">Ampliar detalle de solicitud</button>
		</div>
	</fieldset>
	
	<fieldset>
	<legend th:text="#{ejecutarAtencion.fasesAsignada} + ' ' + ${faseSeleccionada.nombre}">Fases asignadas</legend>
		<div class="span-17" id="tabs">
			  <ul>
			    <li th:each="fase : ${actividad.fase.solicitud.fases}"><a chref="#tabs-1" th:href="'#'+ ${fase.id}" th:text="${fase.nombre}">Fase X</a></li>				      
			  </ul>
			  <div th:each="fase : ${actividad.fase.solicitud.fases}">	
				 <div th:id="${fase.id}" class="container">						
					<div th:if="${fase.id == actividad.fase.id}" class= "span-18">	
						<form action="#" name="grabarActividad" th:object="${actividad}" th:action="@{/grabarActividad}"
						method="post" class="inline" enctype="multipart/form-data">	
						<input type="hidden" th:field="*{id}"/> 		
						<h3><p th:if="${modoConsulta}" th:text="#{ejecutarAtencion.consultaActividad}">Consulta de actividad</p></h3>
						<h3><p th:unless="${modoConsulta}" th:text="#{ejecutarAtencion.editarActividad}">Editar actividad</p></h3>
						<div class="span-8">
							<label th:text="#{ejecutarAtencion.nombreActividad}">Nombre de actividad</label><br/>				
							<input type="text" th:field="*{nombre}" disabled="disabled"/>
						</div>
						<div class="span-8 last">
							<label th:text="#{ejecutarAtencion.Responsable}">Persona responsable </label><br/>				
							<input type="text" th:field="*{operador.nombre}" disabled="disabled"/>
						</div>
						<div class="span-8">
							<label th:text="#{ejecutarAtencion.fechaInicio}">Fecha de inicio </label><br/>					
							<input type="text" th:field="*{fechaInicio}" disabled="disabled"/>
						</div>
						<div class="span-8 last">
							<label th:text="#{ejecutarAtencion.fechaFin}">Fecha de fin </label><br/>					
							<input th:if="${actividad.fechaFin}" type="text" th:field="*{fechaFin}" disabled="disabled"/>
							<input th:unless="${actividad.fechaFin}" type="text" disabled="disabled"/>
						</div>
						<div class="span-16 last">
							<label th:text="#{ejecutarAtencion.estado}">Estado </label><br/>					
							<input type="text" th:value="${actividad.estado}" disabled="disabled"/>
						</div>
						<div class="span-16 last">
							<label th:text="#{ejecutarAtencion.descripcion}">Descripción de la actividad</label><br/>					
							<textarea class="span-16" th:field="*{descripcion}" th:attr="disabled=${modoConsulta}"/><br/>
						</div>
						<div class="span-16 last" th:if="${actividad.archivo != null}">
							 <label th:text="#{ejecutarAtencion.ArchivoAdjunto}">Archivo adjunto </label>					
							 <span th:text="${actividad.archivo.nombre}"></span><br/>
							 <a class="button" href="#" th:href="@{'/abrirArchivo/' + ${actividad.archivo.id} + '/' + ${actividad.archivo.nombre}}">Abrir</a>
						</div>
						<div class="span-16 last" th:unless="${modoConsulta}">
							<label th:unless="${actividad.archivo != null}" th:text="#{ejecutarAtencion.AdjuntarArchivo}">Adjuntar un archivo</label>
							<label th:if="${actividad.archivo != null}" th:text="#{ejecutarAtencion.reemplazarArchivo}">Reemplazar un archivo</label>
							<p th:text="#{ejecutarAtencion.avisoArchivo}"> Nota: El tamaño máximo de los archivos es de 2 MB</p>		
							<input type="file" th:field="*{archivoAux}" />
						</div>						
						<div class="span-16 last" th:unless="${modoConsulta}">
		                	<input id="flagCierre" type='checkbox' th:field="*{flagCierre}" />
							<label th:text="#{ejecutarAtencion.cerrarActividad}" for="flagCierre">Cerrar actividad</label>						
						</div>
						</form>
						<div class="span-16 last">
	                	<script th:inline="javascript">
						//<![CDATA[
						  $(function() {
						    $( "#registrar" ).dialog({
						      autoOpen: false,
						      resizable: false,
						      height:200,
						      width: 350,
						      draggable: false,
						      modal: true,
						      buttons: {
						        "Si": function() {
						        	document.grabarActividad.submit();
		
						        },
						        "No": function() {
						          $( this ).dialog( "close" );
						        }
						      }
						    });
						    $( "#openerRegistrar" ).click(function() {
						        $( "#registrar" ).dialog( "open" );
						      });
						  });
						//]]>
					    </script>
					    <div id="registrar" th:title="#{ejecutarAtencion.registrarTitulo}">
							<p th:text="#{ejecutarAtencion.registrar}" >¿Desea actualizar la actividad?</p>
					    </div>
						<button type="button" class="button positive" id="openerRegistrar" th:value="#{general.registrar}" th:unless="${modoConsulta}">Registrar</button>
	                	
	                <div th:unless="${modoConsulta}">
						<script th:inline="javascript">
						//<![CDATA[
						  $(function() {
						    $( "#cancelar" ).dialog({
						      autoOpen: false,
						      resizable: false,
						      height:200,
						      width: 350,
						      draggable: false,
						      modal: true,
						      buttons: {
						        "Si": function() {
						        	window.location = /*[[@{'/verDetalleTrabajo/' + ${faseSeleccionada.id}}]]*/ };
		
						        },
						        "No": function() {
						          $( this ).dialog( "close" );
						        }
						      }
						    });
						    $( "#openerCancelar" ).click(function() {
						        $( "#cancelar" ).dialog( "open" );
						      });
						  });
						//]]>
						  </script>
						  <div id="cancelar" th:title="#{ejecutarAtencion.cancelarTitulo}">
							<p th:text="#{ejecutarAtencion.cancelar}" >¿Esta seguro de querer cancelar la edición?</p>
						  </div>
						<button type="button" class="button negative" id="openerCancelar" th:value="#{general.cancelar}">Cancelar</button>												 
					</div>
					<a th:if="${modoConsulta}" class="button" href='/consultarAtencion' th:href="@{'/verDetalleTrabajo/' + ${faseSeleccionada.id}}"
		 				th:text="#{general.volver}">Volver</a>	
		 				</div>
	                </div>			    
					</div>		
				  </div>
			  </div>			
	</fieldset>
</body>

</html>
